<template>
  <div style="display: flex; justify-content: center">
    <div style="width: 70%">
      <el-card
        class="card"
        shadow="always"
        :body-style="{
          width: '100%',
        }"
      >
        <template #header>
          <div class="card-header" style="width: 100%">
            <div
              class="header-dev"
              :class="{ active: selected === 'task' }"
              @click="select('task')"
            >
              课后任务
            </div>
            <div
              class="header-dev"
              :class="{ active: selected === 'template' }"
              @click="select('template')"
              style="border-left: 1px solid red"
            >
              模板布置
            </div>
          </div>
        </template>
        <div v-if="selected === 'task'">
          <div class="carder-title">请选择任务类型</div>
          <div class="card-module">
            <div
              class="card-div"
              v-for="(item, index) in items"
              :key="index"
              @click="openDialog()"
            >
              {{ item }}
            </div>
            <div class="card-div" style="border: 0px"></div>
          </div>
        </div>
        <div v-if="selected === 'template'">
          <div class="carder-title">请选择训练模板</div>
          <div class="card-module">
            <div class="card-div" v-for="(item, index) in RWitems" :key="index">
              {{ item }}
            </div>
            <div class="card-div" style="border: 0px"></div>
            <div class="card-div" style="border: 0px"></div>
            <div class="card-div" style="border: 0px"></div>
            <div class="card-div" style="border: 0px"></div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
  <div>
    <el-dialog v-model="dialogTableVisible" title="小星宝" width="800">
        1555555
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";

const items = ref([
  "命名",
  "听反",
  "视觉",
  "xxx",
  "xxx",
  "xxx",
  "xxx",
  "xxx",
  "xxx",
]);
const RWitems = ref([
  "场所",
  "颜色",
  "交通",
  "数字",
  "植物",
  "性别",
  "心里",
  "xxx",
  "xxx",
  "xxx",
  "xxx",
]);

const selected = ref("task");
const select = (option) => {
  selected.value = option;
};

const dialogTableVisible = ref(false);
const openDialog = () => {
  dialogTableVisible.value = true;
};
</script>

<style  scoped>
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
}

:deep(.el-card__header) {
  width: 100;
  display: flex;
  padding: 0;
}
.card-header {
  display: flex;
}
.header-dev {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  margin: 0px;
  font: 40px cursive;
  line-height: 80px;
}
.header-dev.active {
  background-color: #85b0ff; /* 选中时的背景色 */
  font-weight: bold; /* 选中时加粗 */
}

.carder-title {
  font: bold 40px "Fira Sans", serif;
  text-align: center;
  line-height: 80px;
  height: 90px;
}

.card-module {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap; /* 允许换行 */
}
.card-div {
  width: 19%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box; /* 包含边框和内边距在内的总宽度 */
  padding: 10px; /* 添加内边距 */
  margin-bottom: 10px;
  border: 1px solid black; /* 添加边框以便于查看 */
  text-align: center; /* 文字居中 */
}
</style>